---
import Layout from '~layouts/VanillaDemo.astro';
import {title} from './_display-multi.json';
---

<Layout title={title}>
  <section class="gridContainer">
    <div class="gridCell">
      <div class="canvasContainer border-box">
        <canvas class="content-box create-canvas-here"></canvas>
      </div>
      <div class="gridInfo">
        div &gt; <b>canvas</b>.content-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
    <div class="gridCell">
      <div class="canvasContainer content-box create-canvas-here debug"></div>
      <div class="gridInfo">
        <b>div</b>.no-size.content-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
    <div class="gridCell">
      <div class="canvasContainer content-box size-100 create-canvas-here"></div>
      <div class="gridInfo">
        <b>div</b>.size-100%.content-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
    <div class="gridCell">
      <div class="canvasContainer">
        <canvas class="border-box create-canvas-here"></canvas>
      </div>
      <div class="gridInfo">
        div &gt; <b>canvas</b>.border-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
    <div class="gridCell">
      <div class="canvasContainer border-box create-canvas-here"></div>
      <div class="gridInfo">
        <b>div</b>.no-size.border-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
    <div class="gridCell">
      <div class="canvasContainer size-100 border-box create-canvas-here"></div>
      <div class="gridInfo">
        <b>div</b>.size-100%.border-box
        <span class="canvasSizeInfo"></span>
      </div>
    </div>
  </section>
</Layout>

<script>
  import {Display, ParallaxProjection, Stage2D, TextureFactory} from '@spearwolf/twopoint5d';
  import {Color, Sprite, SpriteMaterial} from 'three';
  import assetsUrl from '~demos/utils/assetsUrl';

  function createCanvasSizeInfoUpdater(el: HTMLElement) {
    let canvasSizeInfo = el.parentElement!;
    if (canvasSizeInfo.classList.contains('canvasContainer')) {
      canvasSizeInfo = canvasSizeInfo.parentElement!;
    }
    canvasSizeInfo = canvasSizeInfo.querySelector('.canvasSizeInfo')!;
    return (width: number, height: number, pixelRatio: number) => {
      canvasSizeInfo.textContent = `${width | 0}x${height | 0}x${pixelRatio}`;
    };
  }

  for (const canvas of document.querySelectorAll('.create-canvas-here')) {
    const display = new Display(canvas as HTMLElement);

    const stage = new Stage2D(new ParallaxProjection('xy|bottom-left', {pixelZoom: 2}));

    const textureFactory = new TextureFactory(display.renderer, ['nearest', 'flipy']);

    const textureImage = textureFactory.load(assetsUrl('ball-pattern-rot--not-power-of-2.png'));
    const material = new SpriteMaterial({map: textureImage});
    const sprite = new Sprite(material);

    sprite.scale.set(100, 100, 0); // => should result in a 200x200 (css pixels) pixelart/crisp image
    stage.scene.add(sprite);

    display.on('init', ({renderer}) => {
      renderer.setClearColor(new Color('#304050'), 1.0);
    });

    display.on('resize', ({width, height}) => {
      stage.resize(width, height);
    });

    display.on('frame', ({renderer, now, deltaTime, frameNo}) => {
      stage.renderFrame(renderer, now, deltaTime, frameNo);
    });

    const updateCanvasSizeInfo = createCanvasSizeInfoUpdater(canvas as HTMLElement);

    display.on('resize', ({width, height, display}) => updateCanvasSizeInfo(width, height, display.pixelRatio));

    display.start();
  }
</script>

<style>
  html,
  body {
    height: 100%;
  }
  body {
    margin: 0;
    background-color: #292a2d;
    color: #f0f0f0;
    font-family: sans-serif;
    font-size: 13px;
    line-height: 2;
  }

  .gridContainer {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: '. . .' '. . .';
    gap: 1px;
  }
  .gridCell {
    outline: 1px dashed #4a4c50;
    padding: 1px;
    overflow: hidden;
    position: relative;
  }

  .gridInfo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
    color: #d2d9e0;
    font-size: 16px;
    font-family: monospace;
  }
  .gridInfo b {
    color: #ffffdd;
  }
  .canvasSizeInfo {
    font-weight: bold;
  }

  .canvasContainer {
    padding: 5px;
  }
  .gridCell.canvasContainer:hover,
  .gridCell:hover .canvasContainer {
    outline: 1px solid #f06;
  }

  .size-100 {
    width: 100%;
    height: 100%;
    padding: 7px;
  }
  .content-box {
    box-sizing: content-box;
  }
  .border-box {
    box-sizing: border-box;
  }

  canvas {
    border: 1px dashed #f0f0f0;
    padding: 20px;
  }

  .canvasContainer.content-box.size-100 {
    width: calc(100% - 14px);
    height: calc(100% - 14px);
  }
</style>
